<style src="./index.scss" lang="scss" scoped rel="stylesheet/scss"></style>
<template src="./index.html"></template>
<script>
export default {
    mixins: [Vue.prototype.$vFN.Mixins.Base],

    components: {
        DragResize: async () =>
            Vue.extend(await Vue.prototype.$vFN.Components.Base.DragResize()),
        Draggable: async () =>
            Vue.extend(await Vue.prototype.$vFN.Components.Base.Draggable()),
        ImageBox: async () =>
            Vue.extend(await Vue.prototype.$vFN.Components.Base.ImageBox()),
    },
    data() {
        return {
            // 外部传入
            appWindow: null,
            showSelect: false, //控制显示弹窗
            showBtnShadow: false,

            hotList: [],
            loadingSuccess: false,
        };
    },
    methods: {
        //   添加热区
        addHotspot() {
            this.showBtnShadow = true;
            setTimeout(() => {
                this.showBtnShadow = false;
            }, 100);

            this.hotList.push({
                dragResizeVal: {
                    width: 200,
                    height: 200,
                    top: 0,
                    left: 0,
                },
                linkPath: "",
            });
        },

        // 热区停止后设置数据
        setVal(newRect, index) {
            console.error(newRect);
            console.error(index);
            this.hotList[index].dragResizeVal.width = newRect.width;
            this.hotList[index].dragResizeVal.height = newRect.height;
            this.hotList[index].dragResizeVal.top = newRect.top;
            this.hotList[index].dragResizeVal.left = newRect.left;

            console.log(this.hotList);
        },

        // 删除热区
        deleteHot(index) {
            this.hotList.splice(index, 1);
        },

      

        // 确定热区
        confirmHot() {
            this.showSelect = false;

            this.onSuccess(JSON.parse(JSON.stringify(this.hotList)));
        },

        // 成功回调
        onSuccess() {},
        // 取消回调
        onCancel() {},
        // 失败回调
        onError() {},

        closeBox() {
            this.showSelect = false;
            this.onSuccess(JSON.parse(JSON.stringify(this.hotspotArr)));
        },

        imgOnLoad(msg) {
            if (msg == "ok") {
                this.loadingSuccess = true;
            }
        },

        // 初始化
        init() {
            this.hotList = JSON.parse(JSON.stringify(this.hotspotArr)); //从外部传进来的

            this.showSelect = true;
        },
    },
    watch: {},
    mounted() {
        this.init();
    },
    beforeCreate() {},
};
</script>
